<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增论坛内容')"/>
    <th:block th:include="include :: select2-css"/>
    <th:block th:include="include :: summernote-css"/>
</head>
<body>
<div class="form-content">
    <form id="form-content-add" name="form-content-add" class="form-horizontal">
        <h4 class="form-header h4">基本信息</h4>
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    <label class="col-sm-2 control-label"><span style="color: red; ">*</span>内容标题：</label>
                    <div class="col-sm-10">
                        <input name="contentTitle" placeholder="请输入内容标题" class="form-control" type="text" required>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    <label class="col-sm-2 control-label"><span style="color: red; ">*</span>内容主图：</label>
                    <div class="col-sm-10">
                        <input name="mainImage" id="mainImage" placeholder="请输入内容主图" class="form-control" type="text" required>
                        <br/>
                        <div class="row">
                            <div class="col-md-6">
                                <input type="file" name="file" id="file" accept="image/*"/>
                            </div>
                            <div class="col-md-2">
                                <button id="uploadMainImageBtn" type="button" class="btn btn-primary">上传</button>
                            </div>
                            <div class="col-md-4">
                                <img width="32px" height="32px" id="mainImagePreview" name="mainImagePreview" th:src="@{/ruoyi.png}"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4">
                <div class="form-group">
                    <label class="col-sm-4 control-label"><span style="color: red; ">*</span>标签：</label>
                    <div class="col-sm-8">
                        <input name="tags" class="form-control" type="text" placeholder="请输入标签"
                               required>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <label class="col-sm-4 control-label">内容类型：</label>
                    <div class="col-sm-8">
                        <select name="contentType" class="form-control m-b">
                            <option value="book">电子书籍</option>
                            <option value="video">视频教程</option>
                            <option value="code">项目源码</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <label class="col-sm-4 control-label">状态：</label>
                    <div class="col-sm-8">
                        <select name="status" class="form-control m-b">
                            <option value="0">正常</option>
                            <option value="1">关闭</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <h4 class="form-header h4">其他信息</h4>
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    <label class="col-sm-2 control-label">公开内容：</label>
                    <div class="col-sm-10">
                        <input id="publicContent" name="publicContent" type="hidden">
                        <div class="public_summernote"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    <label class="col-sm-2 control-label">私密内容：</label>
                    <div class="col-sm-10">
                        <input id="privateContent" name="privateContent" type="hidden">
                        <div class="private_summernote"></div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<div class="row">
    <div class="col-sm-offset-5 col-sm-10">
        <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存
        </button>&nbsp;
        <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭
        </button>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-js"/>
<th:block th:include="include :: summernote-js"/>
<script>

    $('.public_summernote').summernote({
        placeholder: '请输入公开内容',
        height: 192,
        lang: 'zh-CN',
        followingToolbar: false,
        callbacks: {
            onImageUpload: function (files) {
                sendFile(files[0], this);
            }
        }
    });

    $('.private_summernote').summernote({
        placeholder: '请输入私密内容',
        height: 192,
        lang: 'zh-CN',
        followingToolbar: false,
        callbacks: {
            onImageUpload: function (files) {
                sendFile(files[0], this);
            }
        }
    });

    // 上传文件
    function sendFile(file, obj) {
        var data = new FormData();
        data.append("file", file);
        $.ajax({
            type: "POST",
            url: ctx + "common/upload",
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            dataType: 'json',
            success: function (result) {
                if (result.code == web_status.SUCCESS) {
                    $(obj).summernote('editor.insertImage', result.url, result.fileName);
                } else {
                    $.modal.alertError(result.msg);
                }
            },
            error: function (error) {
                $.modal.alertWarning("图片上传失败。");
            }
        });
    }

    var prefix = ctx + "bbs/content";

    $("#form-content-add").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            var publicSHTML = $('.public_summernote').summernote('code');
            $("#publicContent").val(publicSHTML);
            var privateSHTML = $(".private_summernote").summernote('code');
            $("#privateContent").val(privateSHTML);
            $.operate.saveTab(prefix + "/add", $('#form-content-add').serialize());
        }
    }

    //上传图标
    $("#uploadMainImageBtn").on("click", function () {
        var file = document["form-content-add"].file.files[0];
        sendMainImageFile(file);
    });

    // 上传文件
    function sendMainImageFile(file) {
        var data = new FormData();
        data.append("file", file);
        $.ajax({
            type: "POST",
            url: ctx + "common/upload",
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            dataType: 'json',
            success: function (result) {
                if (result.code == web_status.SUCCESS) {
                    $("#mainImage").val(result.url);
                    $("#mainImagePreview").attr("src", result.url);
                } else {
                    $.modal.alertError(result.msg);
                }
            },
            error: function (error) {
                $.modal.alertWarning("图片上传失败。");
            }
        });
    }
</script>
</body>
</html>
